<template>
  <div class="admin-layout">
    <el-container class="admin-container">
      <!-- 顶部栏 -->
      <el-header class="admin-header">
        <div class="header-content">
          <div class="logo-section">
            <h2>客户经理拜访系统 - 管理控制台</h2>
          </div>
          <div class="user-section">
            <el-dropdown>
              <span class="user-info">
                <el-icon><User /></el-icon>
                管理员
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <el-container>
        <!-- 侧边栏 -->
        <el-aside class="admin-sidebar" width="250px">
          <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            router
            @select="handleMenuSelect"
          >
            <el-menu-item index="/dashboard">
              <el-icon><House /></el-icon>
              <span>仪表盘</span>
            </el-menu-item>

            <el-menu-item index="/managers">
              <el-icon><User /></el-icon>
              <span>客户经理管理</span>
            </el-menu-item>

            <el-menu-item index="/clients">
              <el-icon><UserFilled /></el-icon>
              <span>客户管理</span>
            </el-menu-item>

            <el-menu-item index="/services">
              <el-icon><Setting /></el-icon>
              <span>服务项目管理</span>
            </el-menu-item>

            <el-menu-item index="/import">
              <el-icon><Upload /></el-icon>
              <span>数据导入</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主内容区域 -->
        <el-main class="admin-main">
          <div class="content-wrapper">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  User,
  UserFilled,
  ArrowDown,
  House,
  Setting,
  Upload
} from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();

// 当前激活的菜单项
const activeMenu = computed(() => route.path);

// 处理菜单选择
const handleMenuSelect = (index: string) => {
  console.log('选择菜单:', index);
};

// 退出登录
const logout = () => {
  // 清除登录状态
  localStorage.removeItem('isLoggedIn');
  localStorage.removeItem('userInfo');

  // 跳转到登录页
  router.push('/login');
};

onMounted(() => {
  // 如果当前路径是根路径，重定向到仪表盘
  if (route.path === '/') {
    router.replace('/dashboard');
  }
});
</script>

<style>
/* 全局样式，当进入管理员模式时隐藏外层App布局 */
body.admin-mode #app > div:not(.admin-layout) {
  display: none !important;
}

body.admin-mode {
  margin: 0;
  padding: 0;
}

.admin-layout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  background: #f0f2f5;
  z-index: 9999;
}

.admin-container {
  height: 100vh;
}</style>

<style scoped>

.admin-header {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 0;
  height: 64px !important;
  line-height: 64px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 24px;
}

.logo-section h2 {
  margin: 0;
  color: #1890ff;
  font-size: 20px;
  font-weight: 600;
}

.user-section {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: #f5f5f5;
}

.admin-sidebar {
  background: #fff;
  border-right: 1px solid #e8e8e8;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.sidebar-menu {
  border-right: none;
  height: 100%;
}

.sidebar-menu .el-menu-item {
  height: 56px;
  line-height: 56px;
  margin: 4px 12px;
  border-radius: 6px;
  transition: all 0.3s;
}

.sidebar-menu .el-menu-item:hover {
  background-color: #e6f7ff;
  color: #1890ff;
}

.sidebar-menu .el-menu-item.is-active {
  background-color: #1890ff;
  color: #fff;
}

.sidebar-menu .el-menu-item.is-active .el-icon {
  color: #fff;
}

.admin-main {
  padding: 24px;
  background: #f0f2f5;
  overflow-y: auto;
  height: calc(100vh - 64px);
}

.content-wrapper {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: auto;
  padding: 24px;
  overflow-y: visible;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .admin-sidebar {
    width: 200px !important;
  }
  
  .header-content {
    padding: 0 16px;
  }
  
  .logo-section h2 {
    font-size: 18px;
  }
  
  .admin-main {
    padding: 16px;
  }
  
  .content-wrapper {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .admin-sidebar {
    width: 180px !important;
  }
  
  .sidebar-menu .el-menu-item {
    height: 48px;
    line-height: 48px;
    margin: 2px 8px;
  }
  
  .sidebar-menu .el-menu-item span {
    font-size: 14px;
  }
}
</style>
